<template>
  <div class="serch-box">
    <div class="location">西安</div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      background="#f66"
      @click="goSearch"
    >
      <template #label>  
        <img src="../assets/logo.png"> |
      </template>
    </van-search>
    <div class="login">登录</div>
  </div>
</template>

<script>
export default {
  name: "HeadCom",
  data() {
    return {
      value: "",
    };
  },
  methods: {
    goSearch(){
      this.$router.push("/serch")
    }
  },
};
</script>


<style scoped>
.serch-box {
  height: 2.75rem;
  display: flex;
  background: #f66;
  align-items: center;
  text-align: center;
  font-size: .75rem;
  color: #fff;
  justify-content: center;
  text-align: center;
}
img{
  height: 1.5rem;
  vertical-align: middle;
}
.line{
  display: inline-block;
  line-height: 1.875rem;
}
.serch-box .van-search{
  flex: 1;
  padding: 0;
}
.serch-box .login{
  width: 2.75rem;
}
.van-search__content{
  border-radius: 1.25rem;
  height: 1.875rem;
}
.serch-box .location{
  width: 2.75rem;
}
</style>